<template>
  <div class="home-container">
    <div class="welcome-section">
      <h1>欢迎使用智能健康监控与管理系统</h1>
      <p>随时跟踪您的健康数据，管理医疗报告，保持健康生活</p>
    </div>
    
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="feature-card">
          <template #header>
            <div class="card-header">
              <el-icon><DataLine /></el-icon>
              <span>健康数据管理</span>
            </div>
          </template>
          <div class="card-content">
            <p>记录并跟踪您的健康指标，如血压、血糖、体重等。通过图表直观地了解您的健康趋势。</p>
            <el-button type="primary" @click="$router.push('/health-data')">
              管理健康数据
            </el-button>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="feature-card">
          <template #header>
            <div class="card-header">
              <el-icon><Document /></el-icon>
              <span>健康报告上传</span>
            </div>
          </template>
          <div class="card-content">
            <p>上传并管理您的医疗报告、化验单和其他健康相关文档，随时随地查阅您的医疗历史。</p>
            <el-button type="primary" @click="$router.push('/health-reports')">
              管理健康报告
            </el-button>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="feature-card">
          <template #header>
            <div class="card-header">
              <el-icon><User /></el-icon>
              <span>个人资料</span>
            </div>
          </template>
          <div class="card-content">
            <p>查看和更新您的个人信息，确保您的资料始终保持最新状态。</p>
            <el-button type="primary" @click="$router.push('/profile')">
              查看个人资料
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <div v-if="healthData.length > 0" class="data-summary">
      <h2>健康数据摘要</h2>
      <el-row :gutter="20">
        <el-col :xs="24" :md="12">
          <latest-health-data :data="healthData.slice(0, 3)" />
        </el-col>
        <el-col :xs="24" :md="12">
          <health-chart-summary :data="healthData" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import { DataLine, Document, User } from '@element-plus/icons-vue'
import LatestHealthData from '../components/health/LatestHealthData.vue'
import HealthChartSummary from '../components/health/HealthChartSummary.vue'

export default {
  name: 'Home',
  components: {
    DataLine,
    Document,
    User,
    LatestHealthData,
    HealthChartSummary
  },
  setup() {
    const store = useStore()
    const healthData = ref([])
    
    onMounted(async () => {
      try {
        const data = await store.dispatch('healthData/fetchHealthData')
        healthData.value = data
      } catch (error) {
        console.error('获取健康数据失败:', error)
      }
    })
    
    return {
      healthData
    }
  }
}
</script>

<style scoped>
.home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.welcome-section {
  text-align: center;
  margin-bottom: 40px;
}

.welcome-section h1 {
  color: #409EFF;
  margin-bottom: 10px;
}

.welcome-section p {
  color: #606266;
  font-size: 16px;
}

.feature-card {
  height: 100%;
  margin-bottom: 20px;
  transition: transform 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
}

.card-header .el-icon {
  margin-right: 10px;
  font-size: 20px;
  color: #409EFF;
}

.card-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 150px;
}

.card-content p {
  margin-bottom: 20px;
}

.data-summary {
  margin-top: 40px;
}

.data-summary h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #409EFF;
}
</style> 